<template>
  <div class="box">
    <div class="nav">
        <h2 v-for="(item , index) in h2" :key="index" @click="render_list(index)">{{item}}</h2>
    </div>
    <div class="list">
        <div class="shop" v-for="(item , index) in num == 0 ? list : shop" :key="index">
            <div class="left">
                <img :src="item.picture" alt="">
            </div>
            <div class="right">
                <div class="top">{{item.name}}</div>
                <div class="bottom">
                    <p>{{item.min_price}}</p>
                    <button @click="add(item)">{{item.status ? '已抢购' : '马上抢'}}</button>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {baobao} from '../axjx/api.js'

export default {
    data(){
        return {
            h2:['正在抢购' , '上新预告'],
            list:null,
            shop:null,
            num:0
        }
    },
    methods:{
        render_list(index){
            this.num = index
        },
        add(item){
            if(item.status == 0){
                item.status = 1
            }else{
                item.status = 0
            }
        }
    },
    beforeMount(){
        
    },
    mounted(){
        baobao( {params:{status : 0}} ).then((res) => {
            this.list = res.data.list
            console.log(this.list);
        }),
        baobao( {params:{status : 1}} ).then((res) => {
            this.shop = res.data.list
            console.log(this.shop);
        })
    },
    updated(){
    }
}
</script>

<style scoped>
    .nav{
        margin-top: 20px;
        height: 40px;
        display: flex;
    }
    h2{
        line-height: 40px;
        width: 120px;
        background-color: chocolate;
        border-radius: 5px;
        margin-left: 20px;
        text-align: center;
    }
    .list{
        width: 95%;
        margin: 10px auto;
        height: 340px;
        overflow-y: auto;
    }
    .shop{
        margin-bottom: 20px;
        height: 120px;
        width: 100%;
        display: flex;
    }
    input{
        border: 1px solid #eee;
    }
    .left{
        height: 120px;
        width: 120px;
    }
    .left img{
        height: 100px;
        margin-left: 10px;
        margin-left: 10px;
    }
    .right{
        flex: 1;
        margin-left: 40px;
        height: 120px;
        box-sizing: border-box;
        padding: 10px 0;
        padding-right: 30px;
    }
    .right .bottom{
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
    }
    .right .bottom button{
        width: 80px;
        height: 30px;
        background-color: orangered;
        border-radius: 30px;
    }
</style>